import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
import axios from "axios";
import { Toast } from "vant";

export default new Vuex.Store({
  state: {
    color: "red",
    list: [],
    collection: [],
    //收藏数据
  },
  getters: {},
  mutations: {
    changeColor(state) {
      let r = Math.floor(Math.random() * 256);
      let g = Math.floor(Math.random() * 256);
      let b = Math.floor(Math.random() * 256);
      state.color = `rgb(${r},${g},${b})`;
    },
    setList(state, val) {
      state.list = val;
    },
    //给list数据赋值
    addCol(state, val) {
      let res = state.collection.filter((i) => i.id == val.id);
      console.log(res);
      if (res.length > 0) Toast("已经在收藏夹里了");
      else {
        state.collection.push(val);
        Toast("收藏成功");
      }
      //只有一行代码的时候大括号可以省略 判断筛选出来的数组的长度 如果是大于0的就证明已经有了 长度是0的时候证明没有 就往里push
    },
    //添加收藏
    remove(state, id) {
      let res = state.collection.findIndex((i) => i.id == id);
      console.log(res);
      state.collection.splice(res, 1);
      //findIndex 根据id找到下标然后删除
    },
    //删除方法
  },
  actions: {
    getList(ctx) {
      // 第一个参数ctx代表上下文就是vuex实例
      axios.get("data.json").then((res) => {
        console.log(res);
        ctx.commit("setList", res.data);
        //在action中不能操作state 得调用mutation操作state
      });
    },
  },
  modules: {},
});
